<template>
  <page-header-wrapper>
    <a-card>
      <div class="flex mb-10">
        <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
        <a-button class="mx-8" type="primary" @click="search">查询</a-button>
      </div>
      <a-table rowKey="projectNum" :columns="columns" :data-source="data" :pagination="pagination" :scroll="{ y: 400 }">
        <span slot="drawDowns" slot-scope="drawDowns"> {{ moneyType(drawDowns) }}</span>
        <span slot="interests" slot-scope="interests"> {{ minMoney(interests) }}</span>
        <span slot="totalArrears" slot-scope="totalArrears"> {{ minMoney(totalArrears) }}</span>
        <span slot="limitFees" slot-scope="limitFees"> {{ minMoney(limitFees) }}</span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)">查看</a>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getCalc } from '@/api/common'
const columns = [
  {
    title: '项目编号',
    dataIndex: 'projectNum',
    key: 'projectNum',
    width: 130
  },
  {
    title: '项目地址',
    dataIndex: 'addr',
    key: 'addr',
    width: 110
  },
  {
    title: '客户名称',
    dataIndex: 'clientName',
    key: 'clientName'
  },
  {
    title: '贷款顾问',
    dataIndex: 'sysUserName',
    key: 'sysUserName'
  },
  {
    title: '放款总额',
    dataIndex: 'drawDowns',
    key: 'drawDowns',
    scopedSlots: { customRender: 'drawDowns' }
  },
  {
    title: '利息',
    dataIndex: 'interests',
    key: 'interests',
    scopedSlots: { customRender: 'interests' }
  },
  {
    title: '贷款限额费',
    dataIndex: 'limitFees',
    key: 'limitFees',
    scopedSlots: { customRender: 'limitFees' }
  },
  {
    title: '总欠金额',
    dataIndex: 'totalArrears',
    key: 'totalArrears',
    scopedSlots: { customRender: 'totalArrears' }
  }
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   key: 'operation',
  //   scopedSlots: { customRender: 'operation' }
  // }
]
export default {
  name: 'calculation',
  data() {
    return {
      keyWord: '',
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      },

      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  computed: {
    columns() {
      if (this.$auth('defaultCalc.get')) {
        return [
          ...columns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    search() {
      this.getData()
    },
    toDetail(record) {
      this.$router.push({ name: 'calcOperation', query: { id: record.projectId } })
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getData(page = 1) {
      var _form = {
        page,
        limit: this.pagination.pageSize
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      const res = await getCalc(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list
    }
  }
}
</script>
<style lang="css" scoped></style>
